<template>
  <div id="CompanyInfo">
    <header class="l-header">
      <h3 class="l-header__bold">武汉集客科技有限公武汉集客科技有限公武汉</h3>
      <van-image class="l-header__cover" :src="randomPic"/>
    </header>
    <van-tabs v-model="active">
      <van-tab title="简介">
        <ul class="c-info">
          <li class="c-info__item" v-for="(label,key) in infoDict">
            <h3 class="c-info__label">{{ label }}</h3>
            <p class="c-info__text">{{ infoData[key] }}</p>
          </li>
        </ul>
      </van-tab>
      <van-tab title="职位">
        <vj-list :load-more="loadMore.bind(this)">
          <template #default="{item:{name,businessName,id}}">
            <ul @click="$pushRoute({path:'job-info',query:{customId:id}})" class="c-job">
              <li class="c-job__title">{{ name }}</li>
              <li>{{ businessName }}</li>
              <li>温州 · 瑞安市</li>
              <li class="c-job__num">7.2-8.4</li>
            </ul>
          </template>
        </vj-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import VjList from "@/components/vj-list.vue";
import {requestByGet} from "@/utils/request";

@Component({
  components: {VjList}
})
export default class CompanyInfo extends Vue implements ComponentOptions<Vue> {
  name = "CompanyInfo";
  infoDict = {
    addr: "工作地点",
    asd: "所属行业",
    qqq: "企业荣誉",
    xxx: "企业简介",
  };
  infoData: any = {
    addr: "湖北省武汉市东湖高新区",
    asd: "湖北省武汉市东湖高新区",
    qqq: "湖北省武汉市东湖高新区",
    xxx: "湖北省武汉市东湖高新区",
  }
  active = 0
  i = 2;


  loadMore() {
    if (!--this.i) return [];
    return this.infoData.arr || [];
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#CompanyInfo {
  min-height: 100vh;
  background: white;

  .l-header {
    @include alignCenter;
    padding: 10px 20px;

    &__bold {
      font-weight: bold;
      font-size: 16px;
      line-height: 1.5;
      margin-right: 30px;
    }

    &__cover {
      flex-shrink: 0;
      @include round(50px);
      margin-left: auto;
    }
  }

  .c-info {
    padding: 0 20px;

    &__item {
      margin-top: 20px;
      padding-left: 18px;
    }

    &__label {
      font-size: 18px;
      margin-left: -18px;
    }

    &__text {
      @include t-overflow(2);
      line-height: 1.6;
      margin-top: 10px;
    }
  }
}
</style>
